<template>
  <div style="width: 100%; height: 100%">
    <button @click="handleDownload">导出</button>
    <div class="container" style="height: 400px; width: 500px">
      <table style="width: 100%" border>
        <tr>
          <td>shopName</td>
          <td></td>
        </tr>
        <tr>
          <td>productName</td>
          <td></td>
        </tr>
        <tr>
          <td>packagesType</td>
          <td></td>
        </tr>
        <tr>
          <td>Name</td>
          <td></td>
        </tr>
      </table>
      <div style="position: relative; display: flex; flex-wrap: wrap">
        <VueDragResize
          v-for="(item, index) in divList"
          :isActive="false"
          :h="50"
          :w="245"
          :x="item.left"
          :y="item.top"
          :key="index"
        >
          <div
            style="height: 50px"
            :style="{
              backgroundColor: item.color,
            }"
          ></div>
        </VueDragResize>
      </div>
    </div>
  </div>
</template>
<script>
import VueDragResize from "vue-drag-resize";
import html2canvas from "html2canvas";
export default {
  components: {
    VueDragResize,
  },
  data() {
    return {
      divList: [
        {
          left: 0,
          top: 5,
          color: "skyblue",
        },
        {
          left: 255,
          top: 5,
          color: "pink",
        },
      ],
    };
  },
  methods: {
    handleDownload() {
      this.$nextTick(() => {
        const containerElement = document.querySelector(".container");
        html2canvas(containerElement, {
          useCORS: true,
          scale: 2,
        }).then((canvas) => {
          console.log(canvas);
          const imageData = canvas.toDataURL("image/png");
          console.log(imageData, "imageData");
          const link = document.createElement("a");
          link.href = imageData;
          link.download = "测试标签.png";
          link.click();
        });
      });
    },
  },
};
</script>

<style scoped>
html {
  padding: 0;
  margin: 0;
}
table {
  border-collapse: collapse;

  border-spacing: 0;
}

td,
th {
  padding: 2px;
  width: 50%;
}
</style>
